<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>购物车——PC端</title>
    <link rel="stylesheet" href="css/main.css">
    <style type="text/css">
        /* 公共样式 */
.clearfix{
    content: '';
    display: block;
    clear: both;
}
.red{
    color: #f30213;
}
.fl{
    float: left;
}
.fr{
    float: right;
}

/* 清除默认样式 */
*{
    margin: 0px;
    padding: 0px;
    font-size: 14px;
}
a{
    text-decoration: none;
    color: #333;
}
input{
    outline: none;
}

.wrap{
    width: 1180px;
    margin: 0 auto;
}
.wrap .location{
    padding: 10px 0;
    border-bottom: 1px solid #ccc;
    margin-bottom: 20px;
}
.cartTable{
    border: 1px solid #ccc;
    
}
.cartTable tr.title{
    background-color: rgb(241, 243, 244);
    font-weight: bold;
}
.cartTable tbody tr td{
    /* border: 1px solid rgb(245, 245, 245); */
    padding: 10px;
}
/* 原价 */
.cartTable tbody tr td .tdl{
    text-decoration: line-through;
    color: #999;
}
/* 商品数量 */
.cartTable tr .amount .unum{
    width: 70px;  
    height: 30px;
    box-sizing: border-box;
    text-align: center;
    font-size: 16px;
    float: left;
}
/* 数量加减按钮 */
.cartTable tr .amount a{
    display: block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 18px;
    border: 1px solid #ccc;
    box-sizing: border-box;
}
.cartTable tr .amount a.Increase{
    border-right: none;
    float: left;
}
.cartTable tr .amount a.Reduce{
    border-left: none;
    float: left;
}

.cartTable tr.count .jiesuan .right{
    text-align: right;
    
}
.cartTable tr.count .jiesuan .right p{
    margin: 5px 0;
}
.cartTable tr.count .jiesuan .right .pay{
    display: block;
    width: 160px;
    height: 50px;
    line-height: 50px;    
    background-color: #f30213;
    color: #fff;
    font-weight: bold;  
    text-align: center;
    font-size: 20px;
}


    </style>

    <script src="/admin/assets/js/jquery-3.5.1.min.js"></script>
</head>

<body>
    <div class="wrap clearfix">
        <div class="location">当前位置：首页<span>&gt;</span><b class="red">购物车</b></div>
        <table width="100%" class="cartTable" cellspacing="0" cellpadding="10px">
            <!-- 首行 -->
            <tr class="title">
                <td width="400">商品</td>
                <td width="150">价格（元）</td>
                <td width="80">操作</td>
            </tr>

            <!-- 商品具体信息 -->
            <tr class="row" th:each="m:${commodities}">
                <td class="tal"><a th:href="${'/user/details/'+m.id}" th:text="${m.name}"></a></td>
                <td>
                    <b class="unit" th:text="${m.price}"></b>
                </td>
                <td><a href="javascript:void(0)" class="btn-del" th:onclick="delCommodity([[${m.id}]])" style="color: brown">删除</a>
                    <a th:href="${'/user/details/'+m.commodityId}" class="btn-del" style="color: #1d9bea">购买</a>
                </td>
            </tr>

        </table>
    </div>    

    <!-- 引入JS文件 -->
    <script>
        function delCommodity(id) {
            $.ajax({
                url:'/user/removeCar/'+id,
                type:'get',
                success:function () {
                    window.location.href="/user/car"
                }
            })
        }
    </script>
</body>

</html>
